{% extends 'EasyVoteBundle::layout.html.twig' %}

{% block title %}EasyVote | {{ election.title }}{% endblock %}

{% block content %}
    {% if isProfileComplete == false %}
        <p class="text-center" style="background: #ff544a;color: #000;padding: 5px;"><span style="color: #FFF;"><strong>Alert:</strong></span>&nbsp;<a href="{{ path('profile_edit', {'id': user.id}) }}" style="color: #000;"><span style="text-decoration: underline;">.Please update your profile</span></a>.</p>
    {% endif %}
    <div class="jumbotron">
        {# Election title #}
        <h2>{{ election.title }}</h2>
        {# Election information #}
        <p>{{ election.text }}</p>
    </div>

    <!-- The Candidates -->
    <div class="container">
        <div class="row row-centered">
        {% for profile in election.profiles %}
            <div class="col-md-3 col-centered">
                <div class="panel panel-default">
                   <div class="panel-heading panel-title">
                   {% if election.isCandidateElection %}
                        <a href="{{ path('profile_show', {'id': profile.user.id}) }}">
                   {% endif %}
                   <strong>{{ profile.title }}</strong></a> 

                   </div>
                    <div class="container-fluid center-block" style="padding-top: 20px;">
                        {% if election.isCandidateElection %}
                            <a href="{{ path('profile_show', {'id': profile.user.id}) }}"> 
                        {% endif %}

                        <img src="{{profile.picture}}" width="200px" height="200px" class="center-block img-thumbnail"></a>
                    </div>
                    <div class="panel-body">
                        {# Candidate information #}
                        {{ profile.summary }}
                    </div>
                    <div class="panel-footer text-center">
                        {%if canVote == true %}
                            {%if votingEndDateStatus == true %}
                              <a href="{{ path('candidate_vote', {'election': election.id, 'candidate': profile.id}) }}"><button class="btn btn-success">Vote</button></a>
                            {% endif %}
                        {% endif %}
                        {% if isAdmin %}
                        <a href="{{ path('candidate_deny', {'election': election.id, 'candidate': profile.id}) }}"><button class="btn btn-danger">Remove</button></a>
                        {% endif %}
                    </div>
                </div>
            </div>
        {% endfor %}
        {% for profile in election.writeInProfiles %}
            <div class="col-md-3 col-centered">
                <div class="panel panel-default">
                   <div class="panel-heading panel-title"> 
                    {% if election.isCandidateElection %}
                   <a href="{{ path('profile_show', {'id': profile.user.id}) }}">
                   {% endif %}
                   {{ profile.title }} (Write-In)</a>
                   </div>
                    <div class="container-fluid center-block" style="padding-top: 20px;">
                        {% if election.isCandidateElection %}
                        <a href="{{ path('profile_show', {'id': profile.user.id}) }}">
                        {% endif %}
                        <img src="{{profile.picture}}" width="200px" height="200px" class="center-block img-thumbnail"></a>
                    </div>
                    <div class="panel-body">
                        {# Candidate information #}
                        {{ profile.summary }}
                    </div>
                    <div class="panel-footer text-center">

                        <div style="padding-top: 5px;">
                        {% if isAdmin %}
                        <a href="{{ path('candidate_approve', {'election': election.id, 'candidate': profile.id}) }}"><button class="btn btn-primary">Approve</button></a>
                        <a href="{{ path('candidate_deny', {'election': election.id, 'candidate': profile.id}) }}"><button class="btn btn-danger">Remove</button></a>
                        {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %} 
        </div>
    </div>


        <script src="https://code.highcharts.com/4.0.1/highcharts.js"></script>
        <script src="https://code.highcharts.com/4.0.1/modules/exporting.js"></script>
        <script type="text/javascript">
            {# Enable the chart rendering here #}
            {{ chart(chartVotesByCandidate) }} 
            {{ chart(chartVotesByTime) }} 
            {{ chart(chartVotesByMultiValuedAttributeInUserAction) }} 
            {{ chart(chartVotesBySingleValuedAttributeInUserAction) }} 
        </script>
        <div class="container-fluid" style="width: 788px;">
            <div class="col-md-10 col-md-offset-1" style="padding-bottom: 10px;">
            <!-- Nav tabs -->
            <h3 class="text-center" style="color: #000;"><strong>Votes By</strong></h3>
                <ul class="nav nav-tabs" role="tablist">
                    <li class="active"><a href="#votesByCandidate" role="tab" data-toggle="tab">Candidate</a></li>
                    <li><a href="#votesByTime" role="tab" data-toggle="tab">Time</a></li>
                    <li><a href="#votesByscopedAffiliations" role="tab" data-toggle="tab">Affiliation</a></li>
                    <li><a href="#votesByClassification" role="tab" data-toggle="tab">Classification</a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane active text-center" id="votesByCandidate">
                        <!-- Votes By Candidate -->
                        <div id="piechart" style="min-width: unset; height: 400px;"></div>
                    </div>
                    <div class="tab-pane text-center" id="votesByTime">
                        <!-- Votes By Time -->
                        <div id="timechart" style="min-width: unset; height: 400px;"></div>
                    </div>
                    <div class="tab-pane text-center" id="votesByscopedAffiliations">
                        <!-- Votes By Affiliation -->
                        <div id="scopedchart" style="min-width: unset; height: 400px;"></div>
                    </div>
                    <div class="tab-pane text-center" id="votesByClassification">
                        <!-- Votes By Classification -->
                        <div id="classchart" style="min-width: unset; height: 400px;"></div>
                    </div>
                </div>
            </div>
        </div>
 

    <!-- Fixed Bottom Navbar -->
    <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <div class="container">
        <div class="nav navbar-right pull-right">
            {% if user.admin %}
			<a href="{{ path('reminder_schedule', {'id': election.id}) }}"><button class="btn navbar-btn btn-default">Add Email Reminder</button></a>
            {% endif %}
            <a href="{{ path('candidate_new', {'id': election.id}) }}"><button class="btn navbar-btn btn-success">Add a Candidate</button></a>
            <button class="btn navbar-btn btn-danger" onclick="window.history.back()">Back</button>
        </div>
    </div>
    </nav>
{% endblock %}
